<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图库管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.7.6/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
</head>
<body style='padding:10px'>
    <button type="button" class="layui-hide" id="test1"></button>
    <div class="layui-fluid">
        <div id="fileManager" lay-filter="test" ></div>
    </div>
<!--    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--        <legend>弹层选图</legend>-->
<!--    </fieldset>-->
<!--    <div class="layui-upload " >-->
<!--        <div style="width:150px;display:inline-block;">-->
<!--            <div class="layui-upload-list picview" data-name='pic1' >-->
<!--                <img class="layui-upload-img">-->
<!--                <p> </p>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div style="width:150px;display:inline-block;">-->
<!--            <div class="layui-upload-list picview" data-name='pic2' >-->
<!--                <img class="layui-upload-img">-->
<!--                <p> </p>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div style="width:150px;display:inline-block;">-->
<!--            <div class="layui-upload-list picview" data-name='pic3' >-->
<!--                <img class="layui-upload-img">-->
<!--                <p> </p>-->
<!--            </div>-->
<!--        </div>-->

<!--    </div>-->
</body>
<script src="/static/lib/layui-v2.7.6/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['fileManager','layer','upload'], function () {
        var fileManager = layui.fileManager
            ,$ = layui.$
            ,upload = layui.upload
            ,layer = layui.layer;

        var upIns = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/image/multiUpload' //上传接口
            ,field:'file[]'
            ,multiple:true
            ,accept:"images"
            ,acceptMime: 'image/*'
        })
        /* data:[{
        thumb:文件地址用于显示
        ,type:文件类型 directory文件夹,png|gif|png|image图片,其它任意
        ,path:文件夹路径用于打开本文件夹
        }] */
        fileManager.render({
            elem: '#fileManager'
            , method:'get'
            , id: 'fmTest'
            , btn_upload: true
            , btn_create: true
            , url: '/image/index'
            , icon_url: '/static/images/ico/'
            , thumb: {'nopic':'/static/images/null-100x100.jpg','width':100,'height':100}
            , parseData: function (res) {
                /*
                data:[{
                    thumb:文件地址用于显示
                    ,type:文件类型  directory文件夹,png|gif|png|image图片,其它任意
                    ,path:文件夹路径用于打开本文件夹
                }]
                */
                let _res = [];
                _res.code = 0;
                _res.data = res.data.images;
                _res.count = res.data.count;
                return _res;
            }
            , done: function (res,curr,count) {
                // console.log(res,curr,count)
            }
            , page: {limit: 10,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
            , where: {}
        });
        //监听图片选择事件
        fileManager.on('pic(test)', function(obj){
            //obj.obj 当前对象
            //obj.data 当前图片数据
            var data = obj.data;
            // layer.alert(JSON.stringify(data), {
            //     title: '当前数据：'
            // });
            // console.log(data)
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: true
                ,shadeClose:true
                ,area: '300px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,btn: ['删除']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: '<div style="padding: 0px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><img src="/img'+data.path+'" style="display: inline-block;width: 100%;height: 100%;"/></div>'
                ,yes: function(index, layero){
                    layer.confirm('确定删除?', {title: '提示'}, function (index2) {
                        $.ajax({
                            url: "/image/delete",
                            type: 'post',
                            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                            data: {id: data.id},
                            async: false,
                            success: function (ret) {
                                if (ret.code > 0) {
                                    layer.msg(ret.msg);
                                } else {
                                    layer.msg("操作成功");
                                    fileManager.reload('fmTest');
                                }
                            },
                            error: function (xhr, textstatus, thrown) {
                                layer.msg('操作失败');
                            }
                        });

                        layer.close(index2);
                        layer.close(index);
                    });
                }
                ,btn2: function(index, layero){
                    alert(2);
                    //按钮【按钮二】的回调
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                ,success: function(layero){
                    // var btn = layero.find('.layui-layer-btn');
                    // btn.find('.layui-layer-btn0').attr({
                    //     href: 'http://www.layui.com/'
                    //     ,target: '_blank'
                    // });
                }
            });
        });
        //监听图片上传事件
        fileManager.on('uploadfile(test)', function(obj){
            //obj.obj 当前对象
            //obj.path 路径
            //更改上传组件参数
            upIns.config.data={'path':obj.path};
            upIns.config.done = function(res){
                fileManager.reload('fmTest');
            }
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById("test1").dispatchEvent(e)
        });
        //监听新建文件夹事件
        fileManager.on('new_dir(test)', function(obj){
            //obj.obj 当前对象
            //obj.folder 文件夹名称
            //obj.path 路径
            // e = JSON.parse(e);
            $.post('/image/createFolder',{'folder':obj.folder,'path':obj.path},function(ret){
                if (ret.code > 0) {
                    layer.msg(ret.msg);
                } else {
                    layer.msg("操作成功");
                    fileManager.reload('fmTest');
                }
            })
        });
        //监听删除文件夹事件
        fileManager.on('deleteDir()', function(obj){
            console.log(obj)
            // obj.data 当前对象
            layer.confirm('确定删除 <img src="/static/images/ico/dir.png" style="vertical-align:middle;height: 19px;width:20px;">('+ obj.data.name + ')  ?', {title: '提示'}, function (index) {
                $.ajax({
                    url: "/image/delete",
                    type: 'post',
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    data: {id: obj.data.id},
                    async: false,
                    success: function (ret) {
                        if (ret.code > 0) {
                            layer.msg(ret.msg);
                        } else {
                            layer.msg("操作成功");
                            fileManager.reload('fmTest');
                        }
                    },
                    error: function (xhr, textstatus, thrown) {
                        layer.msg('操作失败');
                    }
                });

                layer.close(index);
            });
        });
    });
</script>
</html>